import React, {FC} from "react";
import QuesCard from "../../components/QuesCard";
import styles from "./Common.module.scss";
import {useRequest, useTitle} from "ahooks";
import {Typography,Spin} from "antd";
import SearchList from "../../components/Search";
import {getQuestionListService} from "../../services/question";
import useQuestionSearch from "../../hooks/useQuestionSearch";
import PaginationQuestion from "../../components/PaginationQuestion";

//页面分析：  页面名字  搜索      列表   分页loading
//模拟的数据
// const rawCardList =  [
//     {
//         _id :"q1",
//         isPublished:false,
//         name : "标题一",
//         isStar:false,
//         time : "2022-10-11 02:12",
//         cont:0,
//     },
// ]
type OptionType = {
    isStar:boolean,
    isDeleted:boolean,
    page:number,
    pageSize:number
}

const List : FC = ()=>{
    useTitle("妖妖问卷 - 我的问卷")
    const {Title} = Typography;
    // const [sear] = useSearchParams();
    // console.log("keyWord",sear.get("keyWord"));
      //时间  发布  标星    问卷名字  答卷数量         区别什么是操作。什么是数据
      //模拟初始化数据
      // const  [cardList,setCardList] = useState(rawCardList)


    const {data ={},error,loading} =useQuestionSearch();
    const {list=[],total =40} = data;
    return<div>
        <div className={styles.header}>
            <div className={styles.left}>
               <Title level={4}>我的问卷</Title>
            </div>
            <div className={styles.right}>
                <SearchList></SearchList>
            </div>

        </div>
        <div className={styles.content}>

            {loading&&<div style={{textAlign:"center"}}>
                <Spin/>
            </div>}

            { !loading && list.length > 0 &&  list.map((tem:any) => {
                const {_id} = tem;
                return (
                    //进行父子组件的传递
                    //子组件中定义参数
                    <QuesCard key={_id} {...tem}></QuesCard>
                )
            })}

        </div>
        <div className={styles.footer}>
            {!loading &&( <PaginationQuestion  total = {total} ></PaginationQuestion>)}
            {/*{!loading &&( <PaginationQuestion   ></PaginationQuestion>)}*/}
        </div>

    </div>
}

export default List;